<template>
	<view>
	    <!-- 公共组件-每个页面必须引入 -->
	    <public-module></public-module>
		<div class="goodsAsk-page">
			<u-sticky bgColor="#fff">
				<div class="goodsAsk-top">
					<div class="goods-img"  v-if="goodsInfoObj.hasOwnProperty('goodsImages')&&goodsInfoObj.goodsImages.length">
						<img :src="goodsInfoObj.goodsImages[0]" style="width:100%;height:100%;object-fit: cover"/>
					</div>
					<div class="goods-info">
						<div class="goods-name">{{goodsInfoObj.goodsName}}</div>
						<div class="goods-sub-title">共{{questionsCount}}个问题</div>
					</div>
				</div>
		    </u-sticky>


			<div class="goodsAsk-list-div">
				<div class="ask-item" v-for="(item,index) in questionsList" :key="index">
					<div class="ask-item-div">
						<div class="ask-item-label">问</div>
						<div class="ask-item-text">{{item.questionContent}}</div>
						<div class="ask-name">{{item.userName}}</div>
					</div>
					<div class="ask-item-div ask2" v-if="item.answerNum > 0">
						<div class="ask-item-label">答</div>
						<div class="ask-item-text">{{item.answerList[0].answerContent}}</div>
						<div class="ask-name">{{item.answerList[0].userName}}</div>
					</div>
					<div class="ask-item-btn" @click="toGoodsAskInfo(item)" v-if="item.answerNum > 0"><span style="vertical-align: middle">查看全部回答</span></div>
					<div class="ask-item-btn" @click="toGoodsAskInfo(item)" v-else><span style="vertical-align: middle">我来回答</span></div>
				</div>
			</div>

			<div style="padding-bottom:40rpx;">
			   <u-loadmore :status="status"></u-loadmore>
			</div>

			<div class="goodsAsk-bottom">
                <u-button text="我要提问" shape="circle" color="linear-gradient(90deg, #FF8D27 0%, #FF6600 100%)" @click="toSubmitQuestions"></u-button>
            </div>

        </div>
	</view>
</template>

<script>
import { goodsInfo } from '@/config/api.js';

import { getQuestionListAPI } from '@/config/goods.js';
const defaultAskListQuery = {
  goodsId: '',
  pageNum: 1,
  pageSize: 10,
};

export default {
    name: 'goodsAsk',
    data() {
		return {
			goodsId: '',
			goodsInfoObj: {},
			askListQuery: JSON.parse(JSON.stringify(defaultAskListQuery)),
			questionsList:[],
			questionsCount: 0,
			status: 'loadmore',
        }
	},
	
    async onLoad(options) {
		this.goodsId = options.goodsId;
		this.getInfo();
        await this.$onLaunched;
	},

	onShow() {
	  this.clearData();
	  this.getQuestionList();
	},

	onReachBottom() {
		if(this.questionsList.length >= this.questionsCount) {
			this.status = 'nomore';
			return ;
		}
		this.askListQuery.pageNum = ++this.askListQuery.pageNum;
		this.getQuestionList()
	},
	methods: {
		//清除数据
		clearData(){
			this.askListQuery.pageNum = 1;
			this.questionsList = [];
			this.status = 'loadmore';
			this.questionsCount = 0;
		},
		//去提问页面
		toSubmitQuestions() {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: '/pagesCommon/submitQuestions?goodsId='+this.goodsId
				})
			})
		},

		//去商品回答页面
		toGoodsAskInfo(item) {
		    this.judgeLogin(() => {
				uni.navigateTo({
					url: '/pagesCommon/goodsAskInfo?questionId='+item.questionId
				})
		    })
		},

		//获取商品详情
		getInfo() {
			goodsInfo({ goodsId: this.goodsId }).then((res) => {
                this.goodsInfoObj = res;
			})
		},

		//获取问答列表
		getQuestionList() {
			const data = JSON.parse(JSON.stringify(this.askListQuery));
			data.goodsId = this.goodsId;
			this.status = 'loading';
			getQuestionListAPI(data).then((res) => {
				this.questionsCount = res.count;
				this.questionsList = this.questionsList.concat(res.list);
				if(this.questionsList.length >= this.questionsCount) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},

    },

};
</script>

<style lang="scss">
.goodsAsk-page{
	background: #F8F8F8;
	min-height:100%;
	padding-bottom:80px;
    .goodsAsk-top{
		padding:16px;
		background: #fff;
		display: flex;
		justify-items: flex-start;
		align-items: center;
        .goods-img{
			width:65px;
			height:65px;
		}
        .goods-info{
			padding-left:20px;
            .goods-name{
                font-size: 14px;
                line-height: 20px;
                color: #000000;
            }
			.goods-sub-title{
				font-size: 12px;
				line-height: 20px;
				color: #A7A7A7;
			}
		}
	}
	.goodsAsk-list-div{
		padding:16px;
		.ask-item{
			background: #fff;
			border-radius: 10px;
			padding:16px;
			margin-bottom:16px;
			.ask-item-div{
				display: flex;
				justify-items: flex-start;
				align-items: flex-start;
				margin-bottom:10px;
				.ask-item-label{
					width: 25px;
					height: 25px;
					background: #FFAC74;
					border-radius: 13px;
					color:#fff;
					text-align: center;
					line-height: 25px;
					font-size:14px;
				}
				.ask-item-text{
					font-size: 14px;
					font-weight: bold;
					line-height: 25px;
					color: #333333;
					flex:1;
					padding:0 10px;
					word-break:break-all;
				}
				.ask-name{
					font-size: 14px;
					line-height: 25px;
					color: #A7A7A7;
				}
			}
			.ask-item-btn{
				text-align: right;
				font-size: 14px;
				line-height: 20px;
				color: #FF4600;
				cursor: pointer;
			}
			.ask2{
				.ask-item-label{
					background: #8ADB9A;
					border-radius: 5px;
				}
				.ask-item-text{
					font-weight: 400;
				}
			}
		}
	}

	.goodsAsk-bottom{
		padding:8px;
		position: fixed;
		bottom:0;
		width:100%;
		background: #fff;
		left:0;
		box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.16);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

</style>